<template>
  <div class="about">
    <h1>生命周期</h1>
    <div id="dom">{{ msg }} -- {{ num }}</div>
    <button v-on:click="handleClick">点击我</button><br />

    <!-- 
      input: 输入事件
      blur：失去焦点
      focus：获得焦点
      change：发生改变时
     -->

    <input type="text" v-model="username" placeholder="请输入用户名" /><br />
    <input type="text" v-model="phone" placeholder="请输入电话" @focus="hendleFocus" @blur="hendleBlur" @input="handleInput"
      @change="handleChange" /><br />
    <textarea placeholder="请输入您的建议" cols="30" rows="10" v-model="userInput"></textarea><br />
    <p>{{ username }} --- {{ userInput }}</p><br />
    <button @click="submit">提交</button><br />
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated } from "vue"
export default {
  name: "about",
  setup() {
    const data = reactive({
      msg: "你好",
      msg2: "hello, world",
      num: 0,
      username: "",
      userInput: "",
      phone: ""
    })
    onBeforeMount(() => {
      // console.log("onBeforeMount", document.querySelector("#dom"));
    })
    onMounted(() => {
      // console.log("onMounted", document.querySelector("#dom"));
      setTimeout(() => {
        data.msg = "hello"
      }, 2000)
    })
    onBeforeUpdate(() => {
      // console.log("onBeforeUpdate");
    })
    onUpdated(() => {
      // console.log("onUpdated")
    })
    // 时间方法
    const handleClick = () => {
      alert("点击事件")
    }
    const submit = () => {
      alert(`${data.username}的建议是${data.userInput}`)
    }
    const hendleFocus = () => {
      // console.log("获取焦点")
    }
    const hendleBlur = () => {
      // console.log("失去焦点")
      if (!data.phone) {
        alert("电话不能为空")
      }
    }
    const handleInput = () => {
      if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(data.phone)) {
        console.log("不符合手机号")
      }

    }
    return {
      ...toRefs(data),
      handleClick,
      submit,
      hendleFocus,
      hendleBlur,
      handleInput
    }
  },

}

</script>
